import '../public/index'
import url from '../data/url'
import request from '../data/request'
import {tableConfig, header} from '../data/config'
import store from 'store'
import {getUrlParam} from '../data/util'

const base = url.base,
  getHouseOrderInfo = request.getHouseOrderInfo

let param = {
  id: getUrlParam('id')
}

var getFloatStr = function (num) {
  num += '';
  num = num.replace(/[^0-9|\.]/g, ''); //清除字符串中的非数字非.字符

  if (/^0+/) //清除字符串开头的0
    num = num.replace(/^0+/, '');
  if (!/\./.test(num)) //为整数字符串在末尾添加.00
    num += '.00';
  if (/^\./.test(num)) //字符以.开头时,在开头添加0
    num = '0' + num;
  num += '00';        //在字符串末尾补零
  num = num.match(/\d+\.\d{2}/)[0];
};

let data,
  houseOrderLogs

let app = new Vue({
  el: '#app',
  data: {
    lists: null,
    orderDetail: null,
    listLength: null  //轨迹栏的长度
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      let app = this
      $.ajax({
        type: "GET",
        url: base + getHouseOrderInfo + '?id=' + param.id,
        dataType: "json",
        headers: {
          myToken: Cookies.get('myToken')
        },
      })
        .then(res => {
          app.lists = res
          data = {
            orderId: res.object.id,
            devName: res.object.devName,
            buildName: res.object.buildName,
            roomName: res.object.roomName,
            tradeAmount: (res.object.tradeAmount / 100) + '元',
            realName: res.object.realName,
            phone: res.object.phone,
            idCardNo: res.object.idCardNo,
            backup2: res.object.backup2
          }
          app.orderDetail = data
          app.setOrderRoute()
          app.bind()
        })
    },
    setOrderRoute() {
      let info, time, time1, time2, time3, str

      function timeParse(res) {
        return `${res.toLocaleDateString() + ' ' + res.getHours()}:
        ${res.getMinutes() > 9 ? res.getMinutes() : '0' + res.getMinutes()}:
        ${res.getSeconds() > 9 ? res.getSeconds() : '0' + res.getSeconds()}`
      }

      // function orderRouteLen(operaStatus) {
      //   if (arrLen == 1) {
      //     str = `<li class='start active'>
      //              <p class='status-title'>${operaStatus}</p>
      //              <p class='time'>${timeParse(time)}</p>
      //              <p class="status-info">等待付款</p>
      //           </li>
      //           <li class='in-side'>
      //           <p class='status-title'>支付成功</p>
      //          </li>
      //          <li class='end'>
      //           <p class='status-title'>成交成功</p>
      //          </li>`
      //     return str
      //   } else if (arrLen == 2) { //订单流程长度为2时
      //     console.log(arrLen)
      //
      //   } else {
      //     console.log(arrLen)
      //   }
      // }

      let arr = this.lists.houseOrderLogs
      let arrLen = arr.length

      // arr.forEach((k, index) => {
      //   console.log('step:', index, k)
      // })

      arr.forEach((k, index) => {
        console.log(k, index)
        let operaStatus
        switch (k.operaStatus) {
          case '0':
            operaStatus = '提交订单'
            break
          case '1':
            operaStatus = '支付成功'
            break
          case '2':
            operaStatus = '支付失败'
            break
          case '4':
            operaStatus = '成交成功'
            break
          case '5':
          case '3':
            operaStatus = '已取消'
            break
        }
        time = new Date(k.rawAddTime)
        // let str = `${orderRouteLen(operaStatus, )}`
        // $('.order-route-list').append(str)

        if (index == 0) {
          // console.log(k, index)
          let str = `<li class='start active'>
                   <p class='status-title'>提交订单</p>
                   <p class='time'>${timeParse(time)}</p>
                   <!--<p class="status-info">等待付款</p>-->
                </li>`
          $('.order-route-list').append(str)
        } else if (index == arr.length - 1) {
          // console.log(k, index)
          let str = `<li class='end' data-status="${k.operaStatus}">
                        <p class='status-title'>${operaStatus}</p>
                        <p class='time'>${timeParse(time)}</p>
                     </li>`
          $('.order-route-list').append(str)
        }
        else {
          // console.log('switch', k)
          // console.log('text:', $('.in-side .status-title'), 'operaStatus:', operaStatus)
          if ($('.in-side .status-title').text() === operaStatus) {
            console.log('in it:', $('.in-side').closest('.status-title'))
            let str = `<p class='time'>${timeParse(time)}</p>`
            $('.in-side').append(str)
          } else {
            let str = `<li class='in-side active'>
                        <p class='status-title'>${operaStatus}</p>
                        <p class='time'>${timeParse(time)}</p>
                        <!--<p class="status-info">等待付款</p>-->
                     </li>`
            $('.order-route-list').append(str)
          }
        }
      });

      if (document.querySelectorAll('.order-route-list li').length == 1) {
        let str = `<li class='in-side'>
                        <p class='status-title'>支付成功</p>
                        <!--<p class="status-info">等待付款</p>-->
                     </li><li class='end'>
                        <p class='status-title'>成交成功</p>
                     </li>`
        $('.order-route-list').append(str)
        let str2 = `<p class="status-info">等待付款</p>`
        $('.start').append(str2)
      }

      let dataStatus = false
      switch ($('.end').attr('data-status')) {
        case '2':
          let hello = `<li class='end'>
                        <p class='status-title'>支付成功</p>
                     </li>`
          $('.end').addClass('in-side').removeClass('end').addClass('active')
          $('.order-route-list').append(hello)
          let hello2 = `<p class="status-info">等待支付</p>`
          $('.order-route-list .in-side').append(hello2)
          break
        case '3':
        case '4':
        case '5':
          dataStatus = true
          break
        case '1':
          let str = `</li><li class='end'>
                        <p class='status-title'>成交成功</p>
                     </li>`
          $('.order-route-list .end').addClass('in-side').removeClass('end').addClass('active')
          $('.order-route-list').append(str)
          let str2 = `<p class="status-info">等待成交</p>`
          $('.order-route-list .in-side').append(str2)
          break
      }
      // let infoLen = document.querySelectorAll('.status-info');
      // if (infoLen.length > 1) {
      //   let str = infoLen[infoLen.length - 1]
      //   let $a = $(str).parent()
      //   $(infoLen).remove()
      //   $a.append(str)
      // }
      // console.log('1212',$('.status-info').eq().length)
      /** 检测多次支付失败取消重叠 **/
      // $('.in-side').each((index1, element1) => {
      //   $('.in-side').each((index2, element2) => {
      //     if (index1 != index2) {
      //       if ($(element1).find('.status-title').text() == $(element2).find('.status-title').text()) {
      //         if (index1 > index2) {
      //
      //         } else if (inde1 < index2) {
      //
      //         }
      //       }
      //     }
      //   })
      // })

      if (dataStatus) {
        $('.end').addClass('active')
      }

      let listData = document.querySelectorAll('.order-route-list li')
      let len = data.length

// console.log('all info:', this.lists)
//       console.log('lists:', this.lists.houseOrderLogs)
// switch (this.lists.object.payStatus) {
//   case 0:
//     info = this.lists.houseOrderLogs[0]
//     time = new Date(info.rawAddTime)
//     console.log('info:', info)
//     str = `<li class='start active'>
//                   <p class='status-title'>提交订单</p>
//                   <p class='time'>${timeParse(time)}</p>
//                   <p class="status-info">等待付款</p>
//                </li>
//                <li class='in-side'>
//                 <p class='status-title'>支付成功</p>
//                </li>
//                <li class='end'>
//                 <p class='status-title'>成交成功</p>
//                </li>`
//     $('.order-route-list').append(str)
//     break
//   case 1:
//     info = this.lists.houseOrderLogs
//     time1, time2
//     info.forEach(k => {
//       if (k.operaStatus == 0) {
//         time1 = new Date(k.rawAddTime)
//       } else if (k.operaStatus == 1) {
//         time2 = new Date(k.rawAddTime)
//       }
//     })
//     str = `<li class='start active'>
//                 <p class='status-title'>提交订单</p>
//                 <p class='time'>${timeParse(time1)}</p>
//                 <p class="status-info">等待付款</p>
//              </li>
//              <li class='in-side  active'>
//               <p class='status-title'>支付成功</p>
//               <p class='time'>${timeParse(time2)}</p>
//               <p class="status-info">等待成交</p>
//              </li>
//              <li class='end'>
//               <p class='status-title'>成交成功</p>
//              </li>`
//     $('.order-route-list').append(str)
//   case 4:
//     info = this.lists.houseOrderLogs
//     time1, time2, time3
//     info.forEach(k => {
//       if (k.operaStatus == 0) {
//         time1 = new Date(k.rawAddTime)
//       } else if (k.operaStatus == 1) {
//         time2 = new Date(k.rawAddTime)
//       } else if (k.operaStatus == 4) {
//         time3 = new Date(k.rawAddTime)
//       }
//     })
//     str = `<li class='start active'>
//                 <p class='status-title'>提交订单</p>
//                 <p class='time'>${timeParse(time1)}</p>
//
//              </li>
//              <li class='in-side  active'>
//               <p class='status-title'>支付成功</p>
//               <p class='time'>${timeParse(time2)}</p>
//
//              </li>
//              <li class='end active'>
//               <p class='status-title'>成交成功</p>
//       <p class='time'>${timeParse(time3)}</p>
//              </li>`
//     $('.order-route-list').append(str)
//     break
//   case 2:
//     info = this.lists.houseOrderLogs
//     time1, time2
//     info.forEach(k => {
//       if (k.operaStatus == 0) {
//         time1 = new Date(k.rawAddTime)
//       } else if (k.operaStatus == 2) {
//         time2 = new Date(k.rawAddTime)
//       }
//     })
//     str = `<li class='start active'>
//                 <p class='status-title'>提交订单</p>
//                 <p class='time'>${timeParse(time1)}</p>
//              </li>
//              <li class='end active'>
//               <p class='status-title'>支付失败</p>
//       <p class='time'>${timeParse(time2)}</p>
//              </li>`
//     $('.order-route-list').append(str)
//     $('.order-route-list  li').css('width', '50%')
//     break
//   case 3:
//   case 5:
//     info = this.lists.houseOrderLogs
//     info.forEach(k => {
//       // console.log('time:', k.rawAddTime, 'k:', k)
//       if (k.operaStatus == 0) {
//         time1 = new Date(k.rawAddTime)
//       } else if (k.operaStatus == 3 || k.operaStatus == 5 || k.operaStatus == 'SUCCESS') {
//         console.log('time:', k.rawAddTime)
//         time2 = new Date(k.rawAddTime)
//       }
//     })
//     // console.log(time1, time2)
//     str = `<li class='start active'>
//                 <p class='status-title'>提交订单</p>
//                 <p class='time'>${timeParse(time1)}</p>
//              </li>
//              <li class='end active'>
//               <p class='status-title'>已取消（人工取消／超时取消）</p>
//       <p class='time'>${timeParse(time2)}</p>
//              </li>`
//     $('.order-route-list').append(str)
//     $('.order-route-list  li').css('width', '50%')
//     break
// }
// console.log('listLength:', this.listLength)
// console.log('houseOrderLogs detail:', this.lists.houseOrderLogs)
    },
    bind() {
      $('#progressbar li').on('click', e => {
        $(e.target).toggleClass('active')
      })
    }
  }
})






